<template>
    <div class="pagination-container">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[9, 15, 20, 25]"
            :page-size="1" layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
    </div>
</template>
  
<script>

export default {
    name: 'Pagination',
    props: {
        total: Number,
    },
    data() {
        return {
            currentPage4: 1
        }
    },
    methods: {
        handleSizeChange(val) {
            this.$emit('SizeChange', val)
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            this.$emit('CurrentChange', val)

        }
    }
}
</script>
  
<style scoped>
.pagination-container {
    background: #fff;
    padding: 32px 16px;
}

.pagination-container.hidden {
    display: none;
}
</style>
  